<template>
  <div class="navbar-container">
    <!--  html  -->
    <ul class="toolbar-container flex-x-start-center">
      <li v-if="$isAuthBtn(['SP_BTN_MCH_STORE_ADD','SP_BTN_MCH_DEV_ADD'])">
        <el-dropdown placement="bottom" trigger="click" @command="handleTool($event)">
          <span class="flex-y-center-center dropdown-tool">
            <svg-icon icon-class="s-add" class="icon" />
            <div class="tool">添加</div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="$isAuthBtn(['SP_BTN_MCH_STORE_ADD'])" command="store">添加店铺</el-dropdown-item>
            <el-dropdown-item v-if="$isAuthBtn(['SP_BTN_MCH_DEV_ADD'])" command="device">添加终端</el-dropdown-item>
            <el-dropdown-item v-if="$isAuthBtn(['SP_BTN_MCH_DEV_ADD'])" command="printer">添加云打印机</el-dropdown-item>
            <el-dropdown-item v-if="$isAuthBtn(['SP_BTN_MCH_DEV_ADD'])" command="speaker">添加云音箱</el-dropdown-item>
            <el-dropdown-item command="ruYiLite">添加如意Lite</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
      <li v-if="$isAuthBtn(['SP_BTN_MCH_INFO_MODIFY'])" @click.stop="handleTool('mchForm')">
        <svg-icon icon-class="s-info" class="icon" />
        <div class="tool">资料修改</div>
      </li>
      <li v-if="$isAuthBtn(['SP_BTN_MCH_PASSWD_RESET'])" @click.stop="handleTool('password')">
        <svg-icon icon-class="s-close" class="icon" />
        <div class="tool">密码重置</div>
      </li>
      <router-link target="_blank" :to="{path:'/login-platform',query:{mchId:$route.query.mchId,name:activeSidebarMchInfo&&activeSidebarMchInfo.name||''}}">
        <li>
          <svg-icon icon-class="s-login" class="icon" />
          <div class="tool">登录平台</div>
        </li>
      </router-link>
    </ul>

    <!--组件-->
    <MchPwFormDialog ref="mchPwFormDialog" />
    <MchDeviceFormDialog ref="mchDeviceFormDialog" />
    <MchPrinterFormDialog ref="mchPrinterFormDialog" />
    <MchSpeakerFormDialog ref="mchSpeakerFormDialog" />
    <MchStoreFormDialog ref="mchStoreFormDialog" />
    <MchRuYiLiteFormDialog ref="mchRuYiLiteFormDialog" />
  </div>
</template>

<script>
import MchPwFormDialog from '../MchPwFormDialog'
import MchDeviceFormDialog from '../../equipment/components/MchDeviceFormDialog'
import MchPrinterFormDialog from '../../equipment/components/MchPrinterFormDialog'
import MchSpeakerFormDialog from '../../equipment/components/MchSpeakerFormDialog'
import MchRuYiLiteFormDialog from '../../equipment/components/MchRuYiLiteFormDialog'
import MchStoreFormDialog from '../../store-list/components/MchStoreFormDialog'

import { mapGetters } from 'vuex'

export default {
  components: {
    // MchLoginDialog,
    MchPwFormDialog,
    MchDeviceFormDialog,
    MchPrinterFormDialog,
    MchSpeakerFormDialog,
    MchRuYiLiteFormDialog,
    MchStoreFormDialog

  },
  data() {
    return {
      // 配置
      // 状态
      // 数据
      activeTool: null
    }
  },
  computed: {
    ...mapGetters(['activeSidebarMchInfo'])
  },
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    /**
     * 按钮组
     */
    handleTool(type) {
      switch (type) {
        case 'store':
          this.$refs.mchStoreFormDialog.open({ mode: 'add' }).then(() => {})
          break
        case 'device':
          this.$refs.mchDeviceFormDialog.open({ mode: 'add' }).then(() => {})
          break
        case 'printer':
          this.$refs.mchPrinterFormDialog.open({ mode: 'add' }).then(() => {})
          break
        case 'speaker':
          this.$refs.mchSpeakerFormDialog.open({ mode: 'add' }).then(() => {})
          break
        case 'ruYiLite':
          this.$refs.mchRuYiLiteFormDialog.open({ mode: 'add' }).then(() => {})
          break
        case 'payment':
          break
        case 'mchForm':
          this.$router.push({ name: 'MchInformation', query: { mchId: this.$route.query.mchId, activeMenu: 'infoForm', date: new Date().getTime() } })
          break
        case 'password':
          this.$refs.mchPwFormDialog.open().then(() => {})
          break
        case 'login':
          // this.$refs.mchLoginDialog.open().then(() => {})
          break
        case 'logout':
          break
      }
    }
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-dropdown {
  width: 100%;
  height: 100%;
  color: #303133;

  .dropdown-tool {
    width: 100%;
    height: 100%;

    &:hover {
      color: $primary;
    }
  }

}

.el-dropdown-menu {
  top: 98px !important;
  left: 220px !important;
  color: #303133;

  .el-dropdown-menu__item {
    overflow: hidden;
    margin: 0 10px;
    width: 160px;
    font-weight: bold;
    line-height: 36px;
  }

  .el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
    border-radius: 10px;
    background-color: #F2F6Fc;
  }
}

.navbar-container {
  height: 120px;
  padding: 20px 20px 10px;
  color: #303133;

  .toolbar-container {
    //width: 100%;
    height: 90px;
    border-radius: 20px;
    background-color: #fff;

    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 110px;
      height: 100%;
      cursor: pointer;

      &:not(:last-child):after {
        position: absolute;
        top: 35px;
        right: 0;
        content: '';
        width: 1px;
        height: 20px;
        background-color: #C0C4CC;
      }

      .icon {
        font-size: 20px;

      }

      .tool {
        margin-top: 10px;
        font-size: 14px;
      }

      &:hover {
        color: $primary;
      }
    }
  }
}
</style>
